import React, { useEffect, useState } from 'react';
import { Card, Input, Button, Form, Select, message, Popconfirm } from 'antd';
import './index.less'
import {connect} from 'umi'
import { Navtitlelist } from '@/api/index';
import type { FormInstance } from 'antd/es/form';

type Props = {};

const index = (props: any) => {
  const [list, setList] = useState([]);
   const {dispatch,classlist}=props
  const [flag, setflag] = useState(true);
  const [id, setid] = useState('true');
  useEffect(() => {
    dispatch({
      type:"Biao/getclasslist",

    })
  }, []);
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    dispatch({
      type:"Biao/getpush",
      payload:{
        label: values.label,
        value: values.value,
        id:new Date().getTime().toString(),
        updateAt:new Date(),
        createAt:new Date(),
        articleCount:1
      }
    })
  };
  // 删除成功
  const confirm = (e: React.MouseEvent<HTMLElement>) => {
    message.success('删除分类成功');
  };
  // 二次删除
  const cancel = (e: any) => {
    message.error('取消删除');
  };
  const onFinishEdit = (id: string, values: any) => {
    message.success('更新成功');
    form.resetFields();
  };
  const confirms = async (id: string) => {
    form.resetFields();
  };
  return (
    <div className='tags'>
      {flag ? (
        <Card title="添加分类" style={{ width: '35%', height: 200 }}>
          <Form form={form} name="basic" id='basic' onFinish={onFinish} autoComplete="off">
            <Form.Item name="label" className='f1'>
              <Input placeholder={`输入分类名称`} />
            </Form.Item>
            <Form.Item name="value" className='f1'>
              <Input placeholder={`输入分类值(请输入英文,作为路由使用)`} />
            </Form.Item>
            <Form.Item wrapperCol={{ span: 16 }} className='f1'>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Form>
        </Card>
      ) : (
        <Card title="管理分类" style={{ width: '35%', height: 200 }}>
          <Form
            form={form}
            name="basic"
            onFinish={(values) => {
              onFinishEdit(id, values);
            }}
            autoComplete="off"
          >
            <Form.Item name="label">
              <Input placeholder={`输入分类名称`} />
            </Form.Item>
            <Form.Item name="value">
              <Input placeholder={`输入分类值(请输入英文,作为路由使用)`} />
            </Form.Item>
            <Form.Item className="btnBox">
              <div className="btnLeft">
                <Button type="primary" htmlType="submit">
                  更新
                </Button>
                <Button
                  type="dashed"
                  onClick={() => {
                    setflag(true);
                  }}
                >
                  返回添加
                </Button>
                <Popconfirm
                  title={`确认删除这个分类么?`}
                  onConfirm={() => confirms(id)}
                  onCancel={cancel}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button danger style={{ float: 'right' }}>
                    删除
                  </Button>
                </Popconfirm>
              </div>
            </Form.Item>
          </Form>
        </Card>
      )}
      <Card
        title="所有分类"
        style={{
          width: '65%',
          marginLeft: 10,
          height: 200,
          padding: '20px 10px',
        }}
      >
        <ul className='ul'>
          {classlist && classlist.map((item: any) => {
            return (
              <li>
                <a>
                  <span className='spn' key={item.id}>
                    {item.label}
                  </span>
                </a>
              </li>
            );
          })}
        </ul>
      </Card>
    </div>
  );
};

export default connect(({ Biao }: any) => Biao)(index);
